<template>
  <div class="title-com">
    <h1 v-if="title">{{title.ch}}／{{title.en}}</h1>
  </div>
</template>

<script>

  export default {
    props:['title'],
    computed: {},
    data() {
      return {

      }
    },
    components: {},
    mounted() {

    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .title-com{
    border-bottom: 2/@size solid #E5E9F2;
    h1{
      font-family: MicrosoftYaHeiUI-Bold;
      font-size: @font-26;
      color: @theme-color;
      display: inline-block;
      height: 100%;
      position: relative;
      padding-bottom: 6/@size;
       &:after{
         content: "";
         width: 100%;
         height: 2/@size;
         background: @theme-color;
         position: absolute;
         bottom:-2/@size;
         left: 0;
       }
    }
  }

  @media (min-width:320px) and (max-width: 767px) {
    .title-com{
      text-align: center;
      border-bottom:none;
      h1{
        font-size: @font-32;
        font-family: @font-title;
      }
    }
  }

</style>
